<template>
  <div ref="mgrDialog" class="dialog-wrap">
    <el-dialog :title="headerTitle" width="40%" @close="resetDialog" :visible.sync="DialogVisible">
      <el-row :gutter="20">
        <el-form
          v-if="editForm != null"
          ref="dialogForm"
          :rules="rules"
          size="mini"
          :label-width="formLabelWidth"
          :model.sync="editForm"
        >
          <el-col :span="22">
            <el-form-item label="名称" prop="name">
              <el-input v-model="editForm.name" autocomplete="off" placeholder="请输入设备名称"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="22">
            <el-form-item label="设备编号" prop="deviceNo">
              <el-input v-model="editForm.deviceNo" autocomplete="off" placeholder="12位设备编号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="22">
            <el-form-item label="初始密码" prop="password">
              <el-input v-model="editForm.password" autocomplete="off" placeholder="任意字符没有可不填"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="22">
            <el-form-item label="设备分类" prop="categoryId">
              <input-tree
                class="width-full"
                v-model="editForm.categoryId"
                :name="editForm.categoryName"
                :data="groupTree"
                :props="equipGroupProps"
                node-key="id"
                node-name="name"
                @selected="groupSelect"
              ></input-tree>
            </el-form-item>
          </el-col>

          <el-col :span="22">
            <el-form-item label="所属农场" prop="farmId">
               <el-select v-model="editForm.farmId">
                  <el-option
                    v-for="item in farmList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
               </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="22">
            <el-form-item label="设备地址" prop="address">
              <el-input
                disabled
                v-model="editForm.location.address"
                autocomplete="off"
                placeholder="请选择设备地址"
              ></el-input>
              <span @click="showMap" class="el-icon-location-outline mapIcon"></span>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="confirm">确定</el-button>
        <el-button size="mini" type="danger" @click="cancel">取消</el-button>
      </div>
      
    </el-dialog>

	<map-dialog
        v-if="editForm != null"
        :local="editForm.location"
        :showMap="showMapDialog"
        @cancel="cancelMap"
        @setLocal="setLocal"
      ></map-dialog>
  </div>
</template>


<script>
import { list as groupList } from "@/api/equipment/group";
import {
  list as farmList 
} from "@/api/farm/farm";
import { getRolesTree, getRoleTreeList } from "@/api/admin/roles";
import { getUserInfo } from "@/api/user";
import { convertDataToTree } from "@/utils/util";
import InputTree from "@/components/InputTree";

import MapDialog from "@/components/agriculture/equipment/mapDialog.vue";
export default {
  props: {
    //新增还是编辑
    type: {
      type: [Number, String],
      defalut: 1
    },
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: null
    }
  },
  components: {
    InputTree,
    MapDialog
  },
  watch: {
    form(val){
        this.editForm.name = '';
        this.editForm.deviceNo = '';
        this.editForm.password = '';
        this.editForm.categoryId = '';
        this.editForm.farmId = '';
        this.editType = 1;
        this.editForm.location.address = '';
    },
    type(newVal, oldVal) {
      if (newVal == 1) {
        this.headerTitle = "添加设备";
      } else if (newVal == 2) {
        this.headerTitle = "修改设备";
      }
    },
    visible(val) {
      this.DialogVisible = val;
      if (this.type === 1) {
        this.editForm = this.defaultForm;
      }else {
        this.editForm = JSON.parse(JSON.stringify(this.form));
      }
      
    }
  },
  data() {
    return {
      showMapDialog: false,
      headerTitle: "添加设备",
      DialogVisible: false,
      defaultForm: {
        //设备名称
        name: "",
        //设备编号
        deviceNo: "",
        //设备密码
        password: "",
        latitude: "",
        longitude: "",
        categoryId: "",
        categoryName: "",
        location: {
          address: '',
          P: '',
          Q: ''
        },
      },
      groupTree: [],
      testEquipmentGroup: [
        {
          checked: true,
          iconSkin: null,
          id: 0,
          name: "根目录",
          open: true,
          pId: 0
        },
        {
          checked: null,
          iconSkin: null,
          id: 1,
          name: "继电器设备",
          open: true,
          pId: 0
        },
        {
          checked: null,
          iconSkin: null,
          id: 2,
          name: "采集设备",
          open: true,
          pId: 0
        }
      ],
      equipGroupProps: {
        children: "children",
        label: "name",
        value: "id"
      },
      editForm: {
        location: {
          address: '',
          P: '',
          Q: ''
        },
      },
      farmList:[],
      formLabelWidth: "100px",
      //验证规则
      rules: {
        name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
        deviceNo: [
          { required: true, message: "请输入设备编号", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getRoleTree();
    farmList(1, 100, { keywords: '' }).then((res)=>{
      this.farmList = res.data.data.records
    })
  },
  methods: {
    showMap() {
      console.log(this.editForm.location);
      this.showMapDialog = true;
    },
    cancelMap() {
      this.showMapDialog = false;
    },
    setLocal(data, address) {
      this.showMapDialog = false;
      this.editForm.location.P = data.P;
      this.editForm.location.Q = data.Q;
      this.editForm.location.address = address;
      this.editForm.location;
      this.confirm(true);
    },
    //获取树形分组
    getRoleTree() {
      groupList().then(res => {
        console.log("-----------获取树形菜单-----------");
        console.log(res);
        const result = res.data.data.records;
        this.groupTree = result;
      });
    },
    resetDialog() {
      this.DialogVisible = false;
      // this.editForm = null;
      this.$emit("cancel");
    },
    //分组选择
    groupSelect(data) {
      this.editForm.categoryId = data.id;
      this.editForm.categoryName = data.name;
    },
    //取消按钮
    cancel() {
      this.DialogVisible = false;
      // this.editForm = null;
      this.$emit("cancel");
    },
    confirm(status) {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          !status && (this.DialogVisible = false);

          this.$emit("confirm", { type: this.type, data: this.editForm });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.with-full {
  width: 100% !important;
}
.mapIcon {
  font-size: 20px;
  color: green;
  float: right;
  position: relative;
  top: -24px;
  cursor: pointer;
}
</style>